"use client";
import React, { useState, useEffect } from "react";
import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
  SnippetsOutlined,
  BellOutlined,
  UnlockOutlined
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import "../globals.css";
import { Routers } from "../../router/router";
import { useRouter } from "next/navigation"
//搜索框
import { AudioOutlined } from '@ant-design/icons';
import { Input, Space } from 'antd';
import type { SearchProps } from 'antd/es/input/Search';

const { Search } = Input;
const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1677ff',
    }}
  />
);
const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
//点击出现下拉框
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, message } from 'antd';

const onClick: MenuProps['onClick'] = ({ key }) => {
  message.info(`Click on item ${key}`);
};

const items: MenuProps['items'] = [
  {
    label: '修改资料',
    key: '1',
  },
  {
    label: '修改头像',
    key: '2',
  },
  {
    label: '修改密码',
    key: '3',
  },
  {
    label: '退出登录',
    key: '4',
  },
];
//划过显示一个提示框
import { Tooltip } from 'antd';
//事项
import { Button } from 'antd';
const item: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item
      </a>
    ),
  },
];
// console.log(Routers);
const { Header, Content, Sider } = Layout;
const items1: MenuProps["items"] = Routers.map((item) => ({
  key: item.key,
  label: item.label,
  icon: React.createElement(item.icon),
}));
const App = ({ children }: Readonly<{ children: React.ReactNode }>) => {
  const router = useRouter()
  const [menus, setmenus] = useState("menu");
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const items2 = Routers.find((route) => route.key === menus)?.children;
  const item3 = Routers.find((i) => i.key == menus);
  console.log(item3);

  return (
    <Layout style={{ height: "100vh" }}>
      <Header
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          backgroundColor: "#333744",
        }}
      >
        <div style={{ width: "300px", height: "50px", display: "flex", justifyContent: "center", alignItems: "center" }}>
          <p className="Logo">logo</p>
          <p className="ke">客户关系管理系统</p>
        </div>
        <div style={{ width: "550px", height: "50px", display: "flex" }}>
          <Space direction="vertical" className="sosuo">
            <Search placeholder="请输入客户名称" onSearch={onSearch} style={{ width: 200 }} />
          </Space>
          <Tooltip title="我的日程" className="to1">
            <SnippetsOutlined />
            <span>日程</span>
          </Tooltip>
          <Tooltip title="系统信息" className="to2">
            <BellOutlined />
            <span>消息</span>
          </Tooltip>
          <Tooltip title="一键锁屏" className="to3">
            <UnlockOutlined />
            <span>锁屏</span>
          </Tooltip>
          <Dropdown menu={{ items, onClick }} className="to4">
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <UserOutlined />
                Admin
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>
        </div>
      </Header>
      <Layout style={{flex:1,width: "100%",display: "flex"}}>
        <Sider width={300} style={{ background: colorBgContainer, height: "100vh" }}>
          <Menu
          theme='dark'
            mode="inline"
            onClick={(e) => {
              setmenus(e.key);
            }}
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{
              height: "100%",
              width: "120px",
              borderRight: 0,
              float: "left",
            }}
            items={items1}
          />
          <div
            style={{
              height: "50px",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              borderBlock: "1px solid #ccc"
            }}
          >
            <p>{item3 && React.createElement(item3.icon)}</p>
            <p>{item3?.label}</p>
          </div>
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{
              height: "95%",
              width: "180px",
              borderRight: 0,
              backgroundColor: "#FFFFFF",
              float: "left",
              textAlign: "center",
            }}
            items={items2}
            onClick={(e) => {
              router.push(e.key)
            }}
          ></Menu>
        </Sider>
        <Layout style={{ background:"#F0F2F5"}}>
          <Breadcrumb style={{ marginBlock:" 0 16px",background:"white",width:"100%" ,height:"50px",lineHeight:"50px" }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background:"#F0F2F5",
              borderRadius: borderRadiusLG,
              overflow:"scroll"
            }}
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default App;
